<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>项目工程计划-详情</title>
</head>
<style>
.fieldset {
	margin-top: 5px;
	margin-bottom: 0px
}

.layui-legend {
	background-color: #5fb878;
	font-size: 15px !important;
	width: 140px;
}
.layui-table-cell {
    height: 32px;
}
.layui-form-item {
	margin-bottom: 5px;
	clear: both;
	*zoom: 1;
}

.layui-form-label {
	width: 140px;
}

</style>
<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-tab-item layui-show">
			<div class="layui-card">
	          <div class="layui-card-body">
	            <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
	              <ul class="layui-tab-title">
	                <li class="layui-this"><B>表单信息</B></li>
	                <li><B>审批信息</B></li>
	              </ul>
	              <div class="layui-tab-content">
	                <div class="layui-tab-item layui-show">
						<!-- start 业务表单数据显示  put yourself data here -->
				<form class="layui-form" id="addInfo_form">
					<fieldset class="layui-elem-field layui-field-title fieldset"
						id="baseInfo">
						<legend class="layui-btn layui-legend"
							style="text-align: left; cursor: default;">项目基础信息 > </legend>
						<div style="margin-top: 20px">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">申请公司</label>
									<div class="layui-input-inline">
										<input type="text" value="${programPlan.orgName}" style="border: 0px;width:220px"
											readonly="readonly" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">申请部门</label>
									<div class="layui-input-inline">
										<input type="text" value="${programPlan.deptName}"
											style="border: 0px;" readonly="readonly" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">申请人</label>
									<div class="layui-input-inline">
										 <input type="text" name="staffName" value="${programPlan.staffName }"
											readonly="readonly" style="border: 0px" autocomplete="off"
											class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">项目名称</label>
									<div class="layui-input-inline">
										<input type="text" name="proName" value="${programPlan.proName}"
											readonly="readonly" style="border: 0px;width:220px" autocomplete="off"
											class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">业态类型</label>
									<div class="layui-input-inline">
										<input type="text" name="staffName" 
										value="${programPlan.formatTypeName}"
											readonly="readonly" style="border: 0px" autocomplete="off"
											class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">建设期（年）</label>
									<div class="layui-input-inline">
										<input type="text" value="${programPlan.buildYears}" style="border: 0px;"
											name = "buildYears" readonly="readonly" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">运营期（年）</label>
									<div class="layui-input-inline">
										<input type="text" value="${programPlan.omYears}" style="border: 0px;"
											name="omYears" readonly="readonly" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">分区/分段示意图</label>
								<div class="layui-input-block">
									<div class="layui-upload">
										<div class="layui-upload-list" id="20-upload-more-list">
										<c:forEach items="${planAttList}" var="fileAtt">
                                       		<div class="layui-upload-img-div">
                                           		<c:choose>
                                               		<c:when test="${fileAtt.fileSuffix == '.jpg' or fileAtt.fileSuffix == '.jpeg' or fileAtt.fileSuffix == '.png'}">
                                                   		<img src="${fileHttpPre }/${fileAtt.filePath }"
                                                        title="${fileAtt.fileName}" class="layui-upload-img">
                                              		 </c:when>
                                               		<c:otherwise>
                                                   		<img src="${ctx}/resources/images/${fn:substring(fileAtt.fileSuffix,1,5)}.jpg"
                                                        		title="${fileAtt.fileName}" class="layui-upload-img">
                                               		</c:otherwise>
                                           		</c:choose>
	                                            <div class="mask">
	                                                <a href="javascript:void(0)" style="margin-left:32px"
	                                                   onclick="showImg('${fileHttpPre}/${fileAtt.filePath }');">查看</a>
	                                            </div>
	                                            <p>${fileAtt.fileName}</p>
	                                        </div>
                                		</c:forEach>
										</div>
									</div>
								</div>
							</div>
						</div>
					</fieldset>

					<fieldset class="layui-elem-field layui-field-title fieldset"	id="subInfo">
						<legend class="layui-btn layui-legend"
							style="text-align: left; cursor: default; ">工程计划> </legend>
						<div style="margin-top: 20px" id ="mydiv">
					
						</div>
					</fieldset>
				</form>
					<!-- 务表单数据显示  -->
	                </div>
	                <!-- 引入公共流程渲染页面   -->
	                <%@ include file="../include/flowPublic.jsp"%>
	              </div>
	            </div>
	          </div>
	        </div>
			<!-- 审批时 显示 通过/拒绝按钮   -->
			<c:if test="${'y'==processDealWith}">
			<fieldset class="layui-elem-field layui-field-title fieldset" style="text-align:center;">
				<div class="layui-form-item">
					<div class="layui-input-block">
			      		<input class="layui-btn layuiadmin-btn-admin layui-btn-normal " style="margin-top:6px;" type="button" data-type="to_pass_submit" id="to_pass_submit" value="审批通过">
			      		<input class="layui-btn layuiadmin-btn-admin layui-btn-primary " style="margin-top:6px;" type="button" data-type="to_refuse_submit" id="to_refuse_submit" value="审批终止">
			      	</div>
			    </div>
		    </fieldset>
		    </c:if>
			<!-- 审批意见  -->
    		<form class="layui-form" id="flow_process_form" style="display:none">
				<input type="hidden" name="state" id="flow_process_form_state"/>
				<input type="hidden" name="srcBizSguid" value="${modelDetail.id }" />
				<input type="hidden" name="processId" value="${modelDetail.processId }" />
				<div class="layui-form-item" style="padding-top:10px">
			      	<label class="layui-form-label" >审批结果</label>
			      	<div class="layui-input-inline">
			      		<input type="text"  style="border:0px;" readonly="readonly" class="layui-input" id="flow_process_form_state_txt">
			      	</div>
			    </div>
				<div class="layui-form-item" style="padding-top:10px">
			      	<label class="layui-form-label" >审批意见</label>
			      	<div class="layui-input-inline">
			        	<textarea name="dealIdea" placeholder="请输入审批意见" lay-verify="required" class="layui-textarea" style="width:475px;height:145px;"></textarea>
			      	</div>
			    </div>
			    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 15px;">
	                 <legend class="layui-btn layui-legend" style="text-align:left;cursor:default;">附件信息  >
	                 <label class="layui-form-label" style="width:100%;">支持pdf、excel、word、图片资料，可上传多个                
	                 </label>
	                 </legend>
	            </fieldset>	
			  	<div class="layui-form-item" style="margin-top:10px;">
			      	<label class="layui-form-label">附件资料</label>
			      	<div class="layui-input-block">
			      		<div class="layui-upload">
			              	<button type="button" class="layui-btn" id="upload-more">上传</button>
		              		<div class="layui-upload-list" id="upload-more-list">
		              		</div>
		            	</div> 
			      	</div>
			    </div>
			    <div class="layui-form-item layui-hide">
			      <input type="button" lay-submit lay-filter="flow_process_from_submit" id="flow_process_from_submit" value="确认">
			    </div>
			</form>
  		</div>
	</div>
</div>
	<script>
	//静态资源路径前缀
	var staticPath = '${fileHttpPre}';

    layui.config({
        base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
    }).extend({
            index: 'lib/index' //主入口模块
        }).use(
        		[ 'index', 'set', 'upload', 'element', 'laydate', 'table'], 
        		function () {
                var $ = layui.$, form = layui.form, element = layui.element, laydate = layui.laydate,
                    upload = layui.upload, table = layui.table;
            	    	  	
            	 	// 按钮事件
            	    var active = {
            	    	to_pass_submit: function(){
            	    	  $('#flow_process_form_state').val("1");	
            	    	  $('#flow_process_form_state_txt').val("审批通过");	
            	          layer.open({
            	        	  type: 1
            	        	  ,title: '审批通过确认'
            	        	  ,content: $('#flow_process_form')
            	        	  ,area: layui.admin.screen() < 2 ? ['80%', '460px'] : ['820px','460px']
            	        	  ,btn: ['确定', '取消']
            	        	  ,btnAlign: 'c'
            	        	  ,yes: function(index, layero){
            	        		  var submitID = 'flow_process_from_submit'
            	            		,submit = layero.contents().find('#'+ submitID);
            	        		  //监听提交
            	        		  form.on('submit('+ submitID +')', function(data){
            	        			var field = data.field; //获取提交的字段
                    		  		layer.load();
                    		       	//提交 Ajax 成功后，静态更新表格中的数据
                    		       	$.ajax({
                    		           	type : 'post',
                    					url : basePath + "/flowProcess/dealWith",
                    					data: $('#flow_process_form').serialize(),
                    					success:function(result){
                    						if(result.success){
                    							layer.closeAll('loading'); //关闭loading
                    							layer.msg('处理成功~',{icon: 1});
                    							//两秒后关闭当前页面
                    							setTimeout(function(){
                    								// 刷新首页 
                    								var iframe = window.parent.layui.admin.tabsBody(0).find(".layadmin-iframe");
                    								iframe[0].contentWindow.location.reload(true);
                    								top.layui.admin.closeThisTabs(); // 关闭当前标签页
                    						        }, 2000);
                    						}else{
                    							layer.closeAll('loading'); //关闭loading
                    							layer.msg(result.msg,{icon: 7});
                    					  	}
                    					}
                    		       	});
            	            	});  
            	            submit.trigger('click');
            	          }
            	        }); 
            	      },
            	      to_refuse_submit: function(){
            	    	  $('#flow_process_form_state').val("0");
            	    	  $('#flow_process_form_state_txt').val("审批终止");
            	          layer.open({
            	        	  type: 1
            	        	  ,title: '审批终止确认'
            	        	  ,content: $('#flow_process_form')
            	        	  ,area: layui.admin.screen() < 2 ? ['80%', '460px'] : ['820px','460px']
            	        	  ,btn: ['确定', '取消']
            	        	  ,btnAlign: 'c'
            	        	  ,yes: function(index, layero){
            	        		  var submitID = 'flow_process_from_submit'
            	            		,submit = layero.contents().find('#'+ submitID);
            	        		  //监听提交
            	        		  form.on('submit('+ submitID +')', function(data){
            	        			var field = data.field; //获取提交的字段
                  		  		layer.load();
                  		       	//提交 Ajax 成功后，静态更新表格中的数据
                  		       	$.ajax({
                  		           	type : 'post',
                  					url : basePath + "/flowProcess/dealWith",
                  		            data: $('#flow_process_form').serialize(),
                  					success:function(result){
                  						if(result.success){
                  							layer.closeAll('loading'); //关闭loading
                  							layer.msg('处理成功~',{icon: 1});
                  							//两秒后关闭当前页面
                  							setTimeout(function(){
                  								// 刷新首页 
                  								var iframe = window.parent.layui.admin.tabsBody(0).find(".layadmin-iframe");
                  								iframe[0].contentWindow.location.reload(true);
                  								top.layui.admin.closeThisTabs(); // 关闭当前标签页
                  						        }, 2000);
                  						}else{
                  							layer.closeAll('loading'); //关闭loading
                  							layer.msg(result.msg,{icon: 7});
                  					  	}
                  					}
                  		       	});
            	            	});  
            	            submit.trigger('click');
            	          }
            	        }); 
            	      }
            	    }  
            	   
                var $mydiv = $('#mydiv');
        		$.ajax({
        			type : "POST", //提交方式  
        			url : "${ctx}/programPlan/selectSubsById",//路径  
        			data : {
        				"id" :'${programPlan.id}'
        			},//数据，这里使用的是Json格式进行传输  
        			success : function(result) {//返回数据根据结果进行相应的处理 
        					var strBuffer = "";
        					$.each(result.data, function(i,item){
        							strBuffer+= '<div class="layui-form-item">';
        							strBuffer+= '<div class="layui-inline">';
        							strBuffer+= '	<label class="layui-form-label">子项名称</label>';
        							strBuffer+= '	<div class="layui-input-inline">';
        							strBuffer+= '		<input type="text" name="programPlanId" value="'+ item.subName +'"  style="border: 0px;" readonly="readonly" class="layui-input">';
        							strBuffer+= '	</div>';
        							strBuffer+= '</div>';
        							strBuffer+= '</div>';
           							strBuffer+= '<div class="layui-form-item" style="margin:0 20px;">';
           							strBuffer+= '	<table class="layui-table">';
           	                        strBuffer+= '	<thead>';
           	                        strBuffer+= '	<tr>';
           	                        strBuffer+= '	<th style="width:50px">序号</th>';
           	                        strBuffer+= '	<th>节点等级</th>';
           	                        strBuffer+= '	<th>工作节点</th>';
           	                        strBuffer+= '	<th>单体/分区说明</th>';
           	                        strBuffer+= '	<th>计划开始日期</th>';
           	                        strBuffer+= '	<th>计划完成日期</th>';
           	                        strBuffer+= '	</tr>';
           	                        strBuffer+= '	</thead>';
           	                        strBuffer+= '	<tbody id="'+item.id+'"></tbody>';	
           							strBuffer+= '	</table>';
           							strBuffer+= '</div>	';
        			        });
        					$mydiv.append(strBuffer);
        					// 先渲染form 
        					form.render();
        					// table render数据
        					$.each(result.data, function(i,item){
        						$.ajax({
           				   			type : "POST", //提交方式  
           				   			url : "${ctx}/programPlan/selectMilesById",//路径  
           				   			data : {
           				   				"id" :item.id
           				   			},//数据，这里使用的是Json格式进行传输  
           				   			success : function(result) {//返回数据根据结果进行相应的处理 
           				   				if(result.success){
           				   					var tableTemplate = [];
        	   				   				layui.$.each(result.data ,function (index, mileItem){
        	   		                        	var levelIdxName = mileItem.levelIdx == 1 ? '里程碑节点':'管控节点';
        	   		                        	//var finishFlagName = mileItem.finishFlag == 0 ? '未完成':'已完成';
        	   		                        	var planStartTime = layui.util.toDateString(mileItem.planStartTime,"yyyy-MM-dd");
        	   		                        	var planFinishTime = layui.util.toDateString(mileItem.planFinishTime,"yyyy-MM-dd");
        	   		                        	tableTemplate.push('<tr>');
        	   		                        	tableTemplate.push('<td>' + mileItem.showOrderIdx + '</td>');
        	   		                            tableTemplate.push('<td>' + levelIdxName + '</td>');
        	   		                            tableTemplate.push('<td>' + mileItem.mileName + '</td>');
        	   		                            tableTemplate.push('<td>' + mileItem.memo + '</td>');
        	   		                            tableTemplate.push('<td>' + planStartTime + '</td>');
        	   		                            tableTemplate.push('<td>' + planFinishTime + '</td>');
        	   		                            tableTemplate.push('</tr>');
        	   		                        });
        	   				   				$("#"+item.id).append(tableTemplate.join(''));
           				   				}
           				   			}
           						});
    			        	});
        			} 
        		});
        		 // data-type事件
        	    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
        	      var type = $(this).data('type');
        	      active[type] ? active[type].call(this) : '';
        	    });

            });

    //根据url查看文件
    function showImg(url) {
        var openWin = window
            .open(url,'','left=410,height=768, width=1024, top=200,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
    }
  	//删除文件
  	function del(index){
  		layui.$("#fileAtt_"+index).remove();
  		layui.$("#upload_img_"+index).remove();
  	}


</script>
</body>
</html>